<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section{
            display:flex;
            flex-direction:column;
            justify-content:space-around;
            height:300px;
            padding:0 200px;
        }
        section *{
            min-height:30px;
        }
        #err {
            color:red;
        }
        #result{
            line-height:30px;
        }
        .info {
            background:#00c5ff;
            padding:2px;
            margin:2px;
            display:inline-block;
        }
        </style>
</head>
<body>
    <section>
        <div id="err"></div>
        <input id="regex" placeholder="请输入正则表达式">
        <input id="text" placeholder="请输入测试文本">
        <button id="run">测试一下</button>
        <div id="result"></div>
    </section>

    <script>
    (function() {
        // 获取相应dom元素
        var regexInput = document.getElementById("regex");
        var textInput = document.getElementById("text");
        var runBtn = document.getElementById("run");
        var errBox = document.getElementById("err");
        var resultBox = document.getElementById("result");
        
        // 绑定点击事件
        runBtn.onclick = function() {
            // 清除错误和结果
            errBox.innerHTML = "";
            resultBox.innerHTML = "";
            
            // 获取正则和文本
            var text = textInput.value;
            var regex = regexInput.value;
            
            if (regex == "") {
                errBox.innerHTML = "请输入正则表达式";
            } else if (text == "") {
                errBox.innerHTML = "请输入测试文本";
            } else {
                regex = createRegex(regex);
                if (!regex) return;
                var result, results = [];
                
                // 没有修饰符g的话，会死循环
                if (regex.global) {
                    while(result = regex.exec(text)) {
                        results.push(result);
                    }
                } else {
                    results.push(regex.exec(text));
                }
                            
                if (results[0] == null) {
                    resultBox.innerHTML = "匹配到0个结果";
                    return;
                }
                
                // 倒序是有必要的
                for (var i = results.length - 1; i >= 0; i--) {
                    var result = results[i];
                    var match = result[0];
                    var prefix = text.substr(0, result.index);
                    var suffix = text.substr(result.index + match.length);
                    text = prefix 
                        + '<span class="info">'
                        + match
                        + '</span>'
                        + suffix;
                }
                resultBox.innerHTML = "匹配到" + results.length + "个结果:<br>" + text;
            }
        };
        
        // 生成正则表达式，核心函数
        function createRegex(regex) {
            try {
                if (regex[0] == "/") {
                    regex = regex.split("/");
                    regex.shift();
                    var flags = regex.pop();
                    regex = regex.join("/");
                    regex = new RegExp(regex, flags);
                } else {
                    regex = new RegExp(regex, "g");
                }
                return regex;
            } catch(e) {
                errBox.innerHTML = "无效的正则表达式";
                return false;
            }
        }
    })();
    </script>
</body>
</html>